<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于简易Vue的人员管理demo</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div class="demo">
        <!-- main start -->
        <div class="main" id="app">
            <img src="./logo.png" alt="" class="logo w">            
            <template v-if="add === 'true'">
                <div class="input-box">
                    <input v-model="newItem" type="text" placeholder="请输入人员姓名" class="name-form">
                    <button v-on:click="submit" class="submit-btn">确定</button>
                </div>                
            </template>
            <template v-else>
                <button v-on:click="addnew" class="add-btn w">新增</button>
            </template>                              
            <table class="w">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in items">
                        <td>{{ item }}</td>
                        <td>
                            <span v-on:dblclick="edit">编辑</span>
                            <span v-on:dblclick="del">删除</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- main end -->
        <nav>
            <button>首页</button>
            <button class="active">人员管理</button>
        </nav>
        <script src="./vue.js"></script>
    </div>
</body>
</html>